import React, { Component } from "react";
import { useNavigate } from "react-router-dom";

function header(HeaderCom) {
    return (props) => {
        let navigate = useNavigate();
        return <HeaderCom {...props} navigate={navigate} />;
    };
}

class Header extends Component {
    goBack = () => {
        this.props.navigate(-1);
    };

    goOne = () => {
        this.props.navigate(1);
    };

    goTwo = () => {
        this.props.navigate(2);
    };

    render() {
        return (
            <div className="page-header">
                <h2>React Router Demo</h2>
                <button onClick={this.goBack}>回退</button>
                <button onClick={this.goOne}>前进</button>
                <button onClick={this.goTwo}>go 2</button>
            </div>
        );
    }
}

export default header(Header);
